<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>哥的待办清单</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4610488_zf4mfu8lnkh.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      .wrap {
        width: 550px;
        height: 165px;
        margin: 100px auto;
        /* border: 2px solid #ccc; */
      }
      header {
        width: 100%;
        height: 65px;
        position: relative;
      }
      header > input {
        width: 100%;
        height: 100%;
        padding: 16px 16px 16px 60px;
        box-sizing: border-box;
        color: inherit;
        font-family: inherit;
        font-size: 24px;
        font-weight: inherit;
        line-height: 1.4em;
        outline: none;
      }
      header > span {
        position: absolute;
        top: 22px;
        left: 22px;
        visibility: hidden;
      }
      main {
        width: 100%;
        /* height: 60px; */
      }
      main > ul {
        width: 100%;
        height: 100%;
      }
      main > ul > li {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
      }
      main > ul > li > input:nth-of-type(1) {
        width: 30px;
        height: 30px;
        margin: 15px;
      }
      main > ul > li > input:nth-of-type(2) {
        flex: 1;
        border: none;
        font-size: 25px;
        font-weight: normal;
        outline: none;
        color: #757575;
      }
      main > ul > li > button {
        width: 30px;
        height: 30px;
        margin: 15px;
        border: none;
        background-color: #fff;
      }
      footer {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 5px;
        border: 2px solid #ccc;
      }
      footer > button {
        font-weight: bold;
        padding: 5px;
        box-sizing: border-box;
        border: none;
        background-color: #fff;
      }
      footer > button:nth-of-type(1) {
        margin-left: 100px;
        border-radius: 5px;
        border: 1px solid #000;
      }
      footer > button:not(:nth-of-type(1)) {
        border-radius: 5px;
        margin-left: 20px;
      }
      footer > button:nth-of-type(4) {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <header>
        <span class="iconfont icon-xia show"></span>
        <input
          type="text"
          placeholder="What needs to be done?"
          class="Data_value" />
      </header>
      <main>
        <ul class="list">
          <!-- <li>
            <input type="checkbox" class="isCompleted" />
            <input type="text" class="list_input" />
            <button class="del">X</button>
          </li> -->
        </ul>
      </main>
      <footer>
        <span>item left</span>
        <button>All</button>
        <button>Active</button>
        <button>Completed</button>
        <button>Clear completed</button>
      </footer>
    </div>
  </body>
  <script>
    // 定义一个全局数据用来接收键入的数据
    let listArr = [];

    let List = document.querySelector(".list");
    let Data_value = document.querySelector(".Data_value");
    let Show = document.querySelector(".show");
    let aBtn = document.querySelectorAll("footer button");
    // let reg=/^ /;
    // 渲染函数，数据驱动页面理念，每次数据发生改变时进行重新渲染
    function loadList() {
      let HTML = "";
      console.log(listArr);
      if (listArr.length) {
        Show.style.visibility = "visible";
      } else {
        Show.style.visibility = "hidden";
      }
      listArr.forEach((item) => {
        HTML += `
          <li>
            <input type="checkbox" class="isCompleted" />
            <input type="text" value="${item}" class="list_input" />
            <button class="del">X</button>
          </li>
        `;
      });
      List.innerHTML = HTML;
    }
    Data_value.onkeydown = function (e) {
      e.stopPropagation();
      // 如果第一个是空格，后面正常，消除开头的空格，存入数组
      // 如果都是空格，按下Enter后，不进行数据存入操作
      if (Data_value.value.indexOf(" ") == 0) {
        return;
      } else if (Data_value.value != "" && e.keyCode == 13) {
        // 将input中的value值进行数组转化并追加到数组头部
        listArr.unshift(Data_value.value);
        // 清空input的value值
        console.log("键入");
        Data_value.value = null;
        loadList();
      }
    };

    // 选项按钮
    aBtn.forEach((btn) => {
      btn.onclick = () => {
        aBtn.forEach((b) => {
          b.style.border = "none";
        });
        btn.style.border = "1px solid #000";
      };
    });
  </script>
</html>
